<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="${pageContext.request.contextPath}/admin/js/echarts.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="form-inline" style="margin: 20px;">
        <div class="form-group">
            <input type="text" name="year" id="" class="form-control" placeholder="请输入要查看的年份">
        </div>
        <button type="submit" class="btn btn-primary" id="search">提交</button>
        <span style="margin-left: 20px;">当前查看的年份：${year}年</span>
    </div>
    <div id="main" style="width: 45%;height:400px;float: left"></div>
    <div id="main1" style="width: 45%;height:400px;float: right"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '每月订单数'
            },
            tooltip: {},
            legend: {
                data:['数量']
            },
            xAxis: {
                data: ["1","2","3","4","5","6","7","8","9","10","11","12"]
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                formatter: '{value} 单'
            }
            },
            series: [{
                name: '数量',
                type: 'bar',
                data: [${num[0]},${num[1]}, ${num[2]}, ${num[3]}, ${num[4]}, ${num[5]}, ${num[6]}, ${num[7]}, ${num[8]}, ${num[9]}, ${num[10]}, ${num[11]}]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        console.log("ccc"+${money[0]});
        console.log("ccc"+${money[3]});
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '每月订单金额'
            },
            tooltip: {},
            legend: {
                data:['金额']
            },
            xAxis: {
                data: ["1","2","3","4","5","6","7","8","9","10","11","12"]
            },
            yAxis: {
                type: 'value',
                name: '营业额(元)',
                axisTick: {
                    inside: true
                },
                scale: true,
                axisLabel: {
                    margin: 2,
                    formatter: function (value, index) {
                        if (value >= 10000 && value < 10000000) {
                            value = value / 10000 + "万";
                        } else if (value >= 10000000) {
                            value = value / 10000000 + "千万";
                        }
                        return value;
                    }
                },
            },
            series: [{
                name: '金额',
                type: 'bar',
                data: [${money[0]},${money[1]}, ${money[2]}, ${money[3]}, ${money[4]}, ${money[5]}, ${money[6]}, ${money[7]}, ${money[8]}, ${money[9]}, ${money[10]}, ${money[11]}]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>


<%--    查询按钮--%>
    <script>
        $(function (){
            $('#search').click(function (){
                var year=$("input[name='year']").val();
                window.location.href="${pageContext.request.contextPath}/sendEchartsByYear?year="+year;
            })
        })
    </script>
</body>
</html>